<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  <div class="box">
    <h2 class="a">二级标题1</h2>
    <span>文字1</span>
    <span class="a">文字2</span>
    <h2>二级标题2</h2>
    <img class="a" src="" alt="" width="100" height="30">
    <p class="a">段落1</p>
    <span>文字3</span>
    <p>段落2</p>
    <p>段落3</p>
    <span>文字4</span>
    <img src="" alt="" width="100" height="30">
  </div>
</body>
<script>

  var box = document.querySelector(".box");
  var a = document.querySelectorAll(".a");
  var span = document.querySelectorAll("span");
  var p = document.querySelectorAll("p");
  var img = document.querySelectorAll("img");


  box.onclick = eventProxy(a, function(){
    this.style.background = "red";
  });

  box.oncontextmenu = eventProxy(img, function(){
    this.style.border = "solid 10px black";
  });
  


  // 事件委托的封装
  function eventProxy(child, eventHandle){
    // 因为要接收参数，当前函数被直接执行了
    // 所以要返回一个新函数，作为事件处理函数
    return function(eve){
      // 获取事件对象
      var e = eve || window.event;
      // 获取事件目标
      var target = e.target || e.srcElement;
      // 遍历传入的子元素
      for(var i=0;i<child.length;i++){
        // 将遍历到的子元素和当前触发事件的元素，比对
        if(child[i] === target){
          // 如果一致，说明触发事件的元素，在要委托事件的元素列表内
          // 执行真正要执行的功能，同时改变this指向，指向事件目标，方便外部获取触发事件的元素
          eventHandle.call(target);
          break;
        }
      }
    }
  }
  
</script>
</html>